<template>
    <div>
        <div class="container">
            <div class="map-area" id="map"></div>
           <div class="content-area">
               <ul>
                   <li>
                       <label>围栏名称:</label>
                       <input type='text' placeholder='请输入围栏名称' class='area' v-model="parking_lot_name">
                   </li>
                   <li>
                       <label>围栏区域选择:</label>
                   </li>
                   <li>
                       <a>折线</a>
                       <a>矩形</a>
                       <a>多边形</a>
                   </li>
               </ul>
           </div>

        </div>

    </div>
</template>
<script>
    require('com/DrawingManager')
    export default{
        data(){
            return{

               $map:null,
               $drawingManager:null,

                // 搜索地址
                searchAddrss: '',

                parking_lot_name:'',

            }
        },
        mounted(){
           this.init()
        },
        components:{

        },
        methods:{
            init(){
                this.$map=new BMap.Map('map')
                this.$map.centerAndZoom('广州', 11);
/*                //启动自动适应容器变化
                this.$map.enableAutoResize();
                // 初始化地图到指定坐标点
                this.$map.enableScrollWheelZoom(true);*/

            },
            /*绘制管理*/
            drawManager(){
                var styleOptions = {
                    strokeColor:"red",    //边线颜色。
                    // fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
                    strokeWeight: 3,       //边线的宽度，以像素为单位。
                    strokeOpacity: 0.8,    //边线透明度，取值范围0 - 1。
                    fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
                    strokeStyle: 'solid' //边线的样式，solid或dashed。
                };
                this.$drawingManager=new BMapLib.DrawingManager(this.$map,{
                    isOpen:false, //是否开启绘制模式
                    enableDrawingTool: false, //是否显示工具栏
                    drawingToolOptions: {
                        anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
                        offset: new BMap.Size(5, 5), //偏离值
                    },
                    circleOptions: styleOptions, //圆的样式
                    polylineOptions: styleOptions, //线的样式
                    polygonOptions: styleOptions, //多边形的样式
                    rectangleOptions: styleOptions //矩形的样式
                })
            },
            /*清除所有覆盖物*/
            clear(){
                // 清空保存数据
                this.points.length = 0;
                this.latitude = '';
                this.longitude = '';
            },

        }
    }
</script>
<style lang="scss" scoped>
 .container{
     position:relative;
     font-size:14px;
     color:#666;
     background:#fff;
     margin-left:24px;
     min-height:700px;
     width:100%;
     display:flex;
     .map-area{
         position:relative;
         flex:3;
         height:700px;
         margin:10px;
     }
     .content-area{
         flex:1;
         height:700px;
         margin:10px;
         ul{
            position:relative;
             margin-top:10px;
            li{
                margin:0 20px 10px;
                height:30px;
                font-size:14px;
                line-height:30px;
                label{
                  width:80px;
                   margin-right:20px;
                }
                input{
                    width:180px;
                    height:30px;
                    line-height:30px;
                    text-indent: 10px;
                }
                a{
                    display:inline-block;
                    width:60px;
                    margin:0 10px;
                    height:30px;
                    line-height:30px;
                    text-align: center;
                    border:1px #666 solid;
                }
            }
         }
     }

 }

</style>